<template>
    <div>
        <p>{{ count }}</p>
        <p>
            <button @click="increment">+</button>
            <button @click="decrement">-</button>
        </p>
    </div>
</template>

<script>

    import * as types from '../modules/mutation-types'

   // 创建一个 Counter 组件
 export default{
  computed: {
 /*  ...Vuex.mapGetters({
    count:"yearCount"
  }) */
   count () {
      //通过这种方法也可以获取到原始值   this.$store.state.year.count
      return this.$store.state.year.count
      //如果使用getter包装，这里必须使用getter做转换，而不是直接从 store.state里面去拿，那里是没有值得，这样属性层级较深的时候，获取更加方便
      //return this.$store.getters.yearCount
    }
  },
  methods:{
    increment(){
        //mutation 必须是同步的，也就是不允许有ajax，否则无法在回调数据变化的时候，并不知道数据是否真的更新了
        //http://vuex.vuejs.org/zh-cn/mutations.html

        //如果异步请求，必须使用action http://vuex.vuejs.org/zh-cn/actions.html
        this.$store.commit(types.INC_TO_YEAR)
    },
    decrement(){
        this.$store.commit(types.DEC_TO_YEAR)
    }
  }
}
</script>
